<template>
  <footer class="footer">
    <van-tabbar v-model="active" active-color="#ffb2ac" inactive-color="#cecece" v-show="currentPath !== '/show'">
      <van-tabbar-item class="tabbar" v-for="(item, index) in list" :key="index" :to="item.path" :name="item.name">
        <span :class="item.title === '' ? 'tabbar_icon_active' : 'tabbar_icon'">
          <img v-if="active !== item.name" :src="item.url" alt="">
          <img v-else :src="item.url_select" alt="">
        </span>
        <p>{{item.title}}</p>
      </van-tabbar-item>
    </van-tabbar>
  </footer>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'
Vue.use(Tabbar)
Vue.use(TabbarItem)
export default {
  data () {
    return {
      active: this.$route.path.slice(1),
      list: [
        { title: '主页', name: 'home', path: '/home', url: require('../assets/images/home.png'), url_select: require('../assets/images/home_select.png') },
        { title: '视频', name: 'live', path: '/live', url: require('../assets/images/zhibo.png'), url_select: require('../assets/images/zhibo_select.png') },
        { title: '', name: 'service', path: '/service', url: require('../assets/images/kefu.png'), url_select: require('../assets/images/kefu_select.png') },
        { title: '通知', name: 'inform', path: '/inform', url: require('../assets/images/xiaoxi.png'), url_select: require('../assets/images/xiaoxi_select.png') },
        { title: '我的', name: 'user', path: '/user', url: require('../assets/images/wode.png'), url_select: require('../assets/images/wode_select.png') }
      ]
    }
  },
  computed: {
    currentPath () {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.active = this.$route.path.slice(1)
      return this.$route.path
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  width: 100%;
  height: 0.5rem;
  background: white;
  border-top: 1px solid #eee;
}
.tabbar {
  text-align: center;
  p {
    /* color: ; */
    margin-bottom: 0.06rem;
    font-size: 0.12rem;
  }
}
.tabbar_icon {
  display: block;
  width: 0.3rem;
  height: 0.3rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.tabbar_icon_active {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.van-tabbar-item__text {
  margin-bottom: 0.04rem;
}
</style>
